<template>
  <div class="app-container user-detail">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>用户详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="$router.back()">返回</el-button>
      </div>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="16" :md="18">
          <div class="basic-info-section">
            <div class="section-title">
              <i class="el-icon-document" />
              <span>基本信息</span>
            </div>
            <div class="info-grid">
              <!-- 账号信息 -->
              <div class="info-group">
                <div class="group-title">账号信息</div>
                <div class="info-list">
                  <div class="info-item">
                    <span class="info-label">头像：</span>
                    <span class="info-value">
                      <el-image :src="(user.userVo && user.userVo.avatarUrl) || ''" fit="cover" class="avatar-inline" />
                    </span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">昵称：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.nickname) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">账号：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.userId) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">状态：</span>
                    <span class="info-value">{{ getStatusDisplay(user.userVo && user.userVo.status) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">创建时间：</span>
                    <span class="info-value">{{ formatDate(user.userVo && user.userVo.expandCreated) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">更新时间：</span>
                    <span class="info-value">{{ formatDate(user.userVo && user.userVo.expandUpdated) }}</span>
                  </div>
                </div>
              </div>

              <!-- 个人信息 -->
              <div class="info-group">
                <div class="group-title">个人信息</div>
                <div class="info-list">
                  <div class="info-item">
                    <span class="info-label">联系电话：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.contactPhone) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">地址：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.address) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">紧急联系人电话：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.emergencyContactPhone) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">紧急联系人邮箱：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.emergencyContactEmail) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">邮箱：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.email) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">真实姓名：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.realName) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">性别：</span>
                    <span class="info-value">{{ getGenderDisplay(user.userVo && user.userVo.gender) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">年龄：</span>
                    <span class="info-value">{{ user.userVo && user.userVo.age ? user.userVo.age + '岁' : '-' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">个人简介：</span>
                    <span class="info-value">{{ displayVal(user.userVo && user.userVo.bio) }}</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="6">
          <div v-loading="orgLoading" class="org-section" element-loading-text="机构信息加载中" element-loading-background="rgba(255, 255, 255, 0.6)">
            <div class="section-title small">
              <i class="el-icon-office-building" />
              <span>机构信息</span>
            </div>
            <div v-if="orgLoading" class="org-loading"><i class="el-icon-loading" /><span class="loading-text">机构信息加载中...</span></div>
            <div v-else-if="organizationChain.length === 0" class="org-empty">暂无机构信息</div>
            <div v-else class="org-chain">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(org, idx) in organizationChain" :key="org.orgId || org.id || idx">
                  <span class="org-name">{{ org.name || org.orgName || ('机构' + (idx + 1)) }}</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
              <div v-if="currentOrganization" class="org-meta">
                <div class="meta-item"><span class="meta-label">机构编号：</span><span class="meta-value">{{ displayVal(currentOrganization.orgId || currentOrganization.id) }}</span></div>
                <div class="meta-item"><span class="meta-label">机构类型：</span><span class="meta-value">{{ displayVal(currentOrganization.type) }}</span></div>
                <div class="meta-item"><span class="meta-label">联系人：</span><span class="meta-value">{{ displayVal(currentOrganization.contactName) }}</span></div>
                <div class="meta-item"><span class="meta-label">联系电话：</span><span class="meta-value">{{ displayVal(currentOrganization.contactPhone) }}</span></div>
              </div>
            </div>
            <div v-if="!orgLoading && organizationChain.length > 0" class="org-footer">— 无更多机构 —</div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :xs="24" :md="12">
          <el-card shadow="never" class="chart-card">
            <div slot="header">人物情绪雷达图</div>
            <div ref="emotionChart" class="chart" />
          </el-card>
        </el-col>
        <el-col :xs="24" :md="12">
          <el-card shadow="never" class="chart-card">
            <div slot="header">兴趣解读（Top 10）</div>
            <div ref="interestChart" class="chart" />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :xs="24">
          <div v-loading="aiLoading" class="ai-report-section" element-loading-text="AI 报告生成中" element-loading-background="rgba(255, 255, 255, 0.6)">
            <div class="section-title">
              <i class="el-icon-data-analysis" />
              <span>AI 分析报告</span>
            </div>
            <div class="report-grid">
              <!-- 情绪状态 -->
              <div class="report-group status-group">
                <div class="group-title">
                  <i class="el-icon-sunny" />
                  <span>情绪状态</span>
                </div>
                <div class="status-content">
                  <div class="status-item">
                    <span class="status-label">当前状态：</span>
                    <span class="status-value" :class="getEmotionStatusClass(user.userDetailReport && user.userDetailReport.status)">
                      {{ getEmotionStatusText(user.userDetailReport && user.userDetailReport.status) }}
                    </span>
                  </div>
                </div>
              </div>

              <!-- 分析详情 -->
              <div class="report-group detail-group">
                <div class="group-title">
                  <i class="el-icon-document" />
                  <span>分析详情</span>
                </div>
                <div class="detail-content">
                  <div class="analysis-text">
                    {{ displayVal(user.userDetailReport && user.userDetailReport.detail) }}
                  </div>
                </div>
              </div>

              <!-- 专业建议 -->
              <div class="report-group suggestion-group">
                <div class="group-title">
                  <i class="el-icon-lightbulb" />
                  <span>专业建议</span>
                </div>
                <div class="suggestion-content">
                  <div class="suggestion-text">
                    {{ displayVal(user.userDetailReport && user.userDetailReport.suggest) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script>
import userDetailMixin from '@/mixins/userDetailMixin.js'

export default {
  name: 'UserDetail',
  mixins: [userDetailMixin]
}
</script>

<style lang="scss" scoped src="@/styles/userDetail.scss"></style>
